<template>
  <div id="charts">
    <el-row>
      <el-col :span="12">
        <div class="first">
        <span class="charts_title">收入情况</span>
        <ve-line :data="lineData"></ve-line>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="second">
          <span class="charts_title">月销售分布</span>
          <ve-pie :data="pieData"></ve-pie>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        lineData: {
          columns: ['日期','金额'],
          rows: [
            { '金额': 1393,'日期': '2020-1-1'},
            { '金额': 3530,'日期': '2020-1-2'},
            { '金额': 2923,'日期': '2020-1-3'},
            { '金额': 1723,'日期': '2020-1-4'},
            { '金额': 3792,'日期': '2020-1-5'},
            { '金额': 4593,'日期': '2020-1-6'}
          ]
        },
        pieData: {
          columns: ['分类',"下单数"],
          rows: [
            { '分类': '针织衫', '下单数': 3530},
            { '分类': '连衣裙', '下单数': 2923},
            { '分类': '上衣', '下单数': 1723},
            { '分类': '外套', '下单数': 3792},
            { '分类': '裤子', '下单数': 4593}
          ]
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .charts {
    .first, .second, .third, .forth, .five {
      width: 100%;
      display: flex;
      div {
        flex: 1;
      }
    }
  }
  .first,.second{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin-left: 10px;
  }
  .charts_title{
    margin-bottom: 15px;
    color: #7a8188;
  }
</style>
